<script setup>
import Progress from '@/components/Progress.vue'
import { computed, inject, onMounted, reactive } from 'vue'
const circleWidth = computed(() => {
  return (screen.width / 100) * 4.427
})
const $http = inject('$http')

const dataObj = reactive({
  list: [],
})

function getChartData() {
  $http.get('/screen/person/town').then(res => {
    const { data = {} } = res || {}

    dataObj.list = data || []
  })
}

onMounted(() => {
  getChartData()
})
</script>

<template>
  <div class="pepData">
    <div class="title">人口信息</div>
    <div class="pepList scroll">
      <div class="pepItem" v-for="(item, index) in dataObj.list" :key="index">
        <div class="pepProgress">
          <el-progress type="circle" :percentage="item.percent || 0" :width="circleWidth"> </el-progress>

          <Progress style="width: 0; height: 0" />
        </div>

        <div class="nameBox">
          <div class="name">{{ item.label }}</div>
        </div>

        <div class="numbox">
          <span class="num">{{ item.total }}</span
          >人
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.pepData {
  width: 761px;
  height: 269px;
  background-image: url('@/assets/home/boxbg4.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    margin-top: 8px;
    width: 100%;
    height: 24px;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
  }

  .pepList {
    width: calc(100% - 36px);
    overflow: auto hidden;
    flex: 1;
    display: flex;
    margin-top: 50px;
    margin-bottom: 24px;

    .pepItem {
      width: 90px;
      margin-bottom: 23px;

      .pepProgress {
        width: 85px;
        height: 85px;
      }

      .pepProgress :deep(.el-progress-circle) {
        // 修改进度条颜色
        svg > path:nth-child(2) {
          stroke: url(#progerss);
        }
      }

      :deep(.el-progress-circle__track) {
        // 修改进度条背景色
        stroke: #2c4a82;
      }

      :deep(.el-progress__text) {
        // 修改进度条文字提示颜色
        color: #3284ec;
      }

      .nameBox {
        margin-top: 8px;
        height: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .name {
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }

      .numbox {
        height: 17px;
        font-size: 12px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;

        .num {
          color: #08baf9;
          margin-right: 4px;
        }
      }

      &:not(:first-child) {
        margin-left: 36px;
      }
    }
  }
}
</style>
